
<template>
  <div v-for="item in styleKeys">
    <FormItemWraaper 
      v-if="item === 'width'"
      v-bind="$attrs" :selectedWidget="selectedWidget" 
      :editorProps="editorProps" 
      :name="[item]"
    >
      <Input v-model:value="value.width" :placeholder="editorProps.placeholder || '请输入宽度'" />
    </FormItemWraaper>

    <FormItemWraaper 
      v-if="item === 'textAlign'"
      v-bind="$attrs" :selectedWidget="selectedWidget" 
      :editorProps="editorProps" 
      :name="[item]"
    >
      <SelectEditor 
        :formItemFlag="false"
        v-model:value="value.textAlign" 
        :designer="designer"
        :editorProps="{ options: textAlignOptions  }"
      />
    </FormItemWraaper>

    <FormItemWraaper 
      v-if="item === 'paddingTop'"
      v-bind="$attrs" :selectedWidget="selectedWidget" 
      :editorProps="editorProps" 
      :name="[item]"
    >
      <Input style="width: 100%;" v-model:value="value.paddingTop" :placeholder="editorProps.placeholder || '请输入'"/>
    </FormItemWraaper>

    <FormItemWraaper 
      v-if="item === 'paddingBottom'"
      v-bind="$attrs" :selectedWidget="selectedWidget" 
      :editorProps="editorProps" 
      :name="[item]"
    >
      <Input style="width: 100%;" v-model:value="value.paddingBottom" :placeholder="editorProps.placeholder || '请输入'"/>
    </FormItemWraaper>


    <FormItemWraaper 
      v-if="item === 'marginTop'"
      v-bind="$attrs" :selectedWidget="selectedWidget" 
      :editorProps="editorProps" :name="[item]"
    >
      <Input style="width: 100%;" v-model:value="value.marginTop" :placeholder="editorProps.placeholder || '请输入'" />
    </FormItemWraaper>

    <FormItemWraaper 
      v-if="item === 'marginBottom'"
      v-bind="$attrs" :selectedWidget="selectedWidget" 
      :editorProps="editorProps" 
      :name="[item]"
    >
      <Input style="width: 100%;" v-model:value="value.marginBottom" :placeholder="editorProps.placeholder || '请输入'"/>
    </FormItemWraaper>

    
    <FormItemWraaper 
      v-if="item === 'fontSize'"
      v-bind="$attrs" :selectedWidget="selectedWidget" 
      :editorProps="editorProps" 
      :name="[item]"
    >
      <Input style="width: 100%;" v-model:value="value.fontSize" :placeholder="editorProps.placeholder || '请输入'"/>
    </FormItemWraaper>
    
  </div>

</template>
<script lang="ts" name="style-editor" setup>
import { ref, computed, watch, onMounted } from 'vue';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useI18n } from '/@/hooks/web/useI18n';
import FormItemWraaper from './PropFormItemWrapper.vue'
import { Input, InputNumber } from 'ant-design-vue';
import type { Designer } from '../../type'
import SelectEditor from './SelectEditor.vue';
const { t } = useI18n('diyForm')

const props = defineProps({
  value: { type: Object, default: () => {} },
  editorProps: { type: Object, default: () => {}},
  selectedWidget: Object,
  designer: { type: Object as () => Designer}
})

const styleKeys = props.editorProps.styleKeys || []

const emit = defineEmits(['update:value']);
const [state] = useRuleFormItem(props, 'value', 'update:value');
const textAlignOptions = ref([
  { label: '居左', value: 'left' },
  { label: '居中', value: 'center' },
  { label: '居右', value: 'right' },
])
watch(
  () => state.value,
  (val : any) => {
    
  }, 
  {
    immediate: true
  }
)
onMounted(() => {

})

</script>

<style lang="less">

</style>
